<template>
   <div class="app-newinfo">
      <!--插入图片，是图片根据屏幕变化  img-fluid-->
    <img src="img/header-bg.jpg" alt="" class="img-fluid"/>
    <!--会出现往下排列按时，所以用绝对定位脱离文档流-->
    <header>
        <!--nav用来设置背景-->
        <nav style="position: fixed;z-index: 10">
            <div class="container">
                <div class="header_top">
                    <!--按屏幕尺寸设置隐藏-->
                    <div class="hid">
                        <ul class="list-unstyled  d-flex  pt-2 flex-row-reverse mb-0 ">
                            <li class="text-white pr-3"><a href="#" class="text-white ">(012) 6985 236 7512</a></li>
                            <li class="text-white pr-3">Sat-Sun: 11am to 4pm</li>
                            <li class="text-white pr-3">Mon-Fri: 8am to 2pm</li>
                        </ul>
                    </div>
                    <!--折叠导航栏-->
                    <div class="navbar navbar-expand-md p-0 pt-1 pb-1 navbar-dark">
                        <!--折叠不隐藏-->
                        <img src="img/logo.png" alt="" class="navbar-brand"/>
                        <button class="btn navbar-toggler" data-toggle="collapse" data-target="#nav1">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse flex-row-reverse" id="nav1">
                            <ul class="navbar-nav">
                                <li class="nav-item"><a href="#" class="nav-link text-white">HOME</a></li>
                                <li class="nav-item"><a href="#" class="nav-link text-white">ABOUT</a></li>
                                <li class="nav-item"><a href="#" class="nav-link text-white">COFFEE</a></li>
                                <li class="nav-item"><a href="#" class="nav-link text-white">REVIEW</a></li>
                                <li class="nav-item"><a href="#" class="nav-link text-white">BLOG</a></li>
                                <li class="nav-item"><a href="#" class="nav-link text-white">PAGES<i></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <div class="container text-white mt-5 pt-5">
            <p>NOW YOU CAN FEEL THE ENERGY</p>
            <h1>Start your day with a black Coffee</h1>
            <button class="btn btn-info btn-outline-info mt-4">BUY NOW</button>
        </div>
    </header>

    <section class="container mt-5 mb-5">
        <div class="row">
            <div class="col-lg-6 col-md-12 ">
                <img src="img/video-bg.jpg" alt="" class="card-img"/>
            </div>
            <div class="col-lg-6 col-md-12 pt-5">
                <p class="font-1 mb-0">LIVE COFFEE MAKING PROCESS.</p>
                <h2 class="mb-0">We Telecast our Coffee Making Live</h2>
                <p>We are here to listen from you deliver exellence</p>
                <p class="font-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Deserunt dicta eveniet facere necessitatibus perspiciatis
                    placeat velit? Architecto deserunt explicabo ipsam,
                    magni nam nihil quam, quidem soluta suscipit tempore ut, vel!</p>
                <img src="img/signature.png" alt=""/>
            </div>
        </div>
    </section>
    <div id="main">
        <!--<img src="img/menu-bg.jpg" alt="" class="img_bg"/>-->
        <div id="article" class="container">
            <h1 class="text-center pt-5">What kind of Coffee we serve for you</h1>
            <p class="text-center">What kind of Coffee we serve for you</p>
            <div class="row">
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino <b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-sm-12">
                    <div class="rounded bg-white pt-4 pb-2 pl-4 pr-4 shadow mt-4 mb-4">
                        <h5>Cappuccino<b class="money">$49</b></h5>
                        <p>Usage of the Internet is becoming more common due to rapid advance.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--照片墙，card-img设置宽度为100%-->
    <div id="photo" class="mt-5 pt-5">
        <div class="container">
            <h1 class="text-center">What kind of Coffee we serve for you</h1>
            <p class="text-center text-muted mb-5 pb-5">Who are in extremely love with eco friendly system.</p>
            <div class="row ">
                <div class="col-lg-4 col-md-12">
                    <img src="img/g1.jpg" alt="" class="mb-4  card-img"/><br>
                    <img src="img/g2.jpg" alt="" class="mb-4 card-img"/>
                </div>
                <div class="col-lg-8 col-md-12">
                    <div class="row">
                        <div class="col-lg-12"><img src="img/g3.jpg" alt="" class="card-img"/></div>
                    </div>
                    <div class="row mt-4">
                        <div class="col-lg-6 col-md-12"><img src="img/g4.jpg" alt="" class="card-img mb-4"/></div>
                        <div class="col-lg-6 col-md-12"><img src="img/g5.jpg" alt="" class="card-img"/></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="article-2">
        <div class="container">
            <h1 class="text-center text-white pt-5">What kind of Coffee we serve for you</h1>
            <p class="text-center text-white">Who are in extremely love with eco friendly system.</p>
            <div class="row">
                <div class="col-lg-6 col-md-12">
                    <img src="img/r1.png" alt="" class="mt-2 pt-5"/>
                    <h5 class="text-white mt-2">lorem ipusm</h5>
                    <p class="mt-4 text-white">Accessories Here you can find the best computer accessory for your laptop,
                        monitor, printer, scanner, speaker. Here you can find the best
                        computer accessory for your laptop, monitor, printer, scanner, speaker.</p>
                </div>
                <div class="col-lg-6 col-md-12">
                    <img src="img/r2.png" alt="" class="mt-2 pt-5"/>
                    <h5 class="text-white mt-2">lorem ipusm</h5>
                    <p class="mt-4 text-white">Accessories Here you can find the best computer accessory for your laptop,
                        monitor, printer, scanner, speaker. Here you can find the best
                        computer accessory for your laptop, monitor, printer, scanner, speaker.</p>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-12 mb-5"><p class="text-white p-font">2536</p><p class="text-white">Happy Client</p></div>
                <div class="col-lg-3 col-md-6 col-sm-12 mb-5"><p class="text-white p-font">7562</p><p class="text-white">Total Projects</p></div>
                <div class="col-lg-3 col-md-6 col-sm-12 mb-5"><p class="text-white p-font">2013</p><p class="text-white">Cups Coffee</p></div>
                <div class="col-lg-3 col-md-6 col-sm-12 mb-5"><p class="text-white p-font">10536</p><p class="text-white">Total Submitted</p></div>
            </div>
        </div>
    </div>
    <div id="article-3" class="mt-5 pt-5">
        <div class="container">
            <h1 class="text-center">What kind of Coffee we serve for you</h1>
            <p class="text-center">Who are in extremely love with eco friendly system.</p>
            <div class="row mt-5 pt-3">
                <div class="col-lg-6 col-md-12 mb-5">
                    <img src="img/b1.jpg" alt="" class="card-img mb-3"/><br>
                    <button class="btn btn-light">Travel</button>
                    <button class="btn btn-light">Life Style</button>
                    <h5>Portable latest Fashion for young women</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore.</p>
                    <p>31st January, 2018</p>
                </div>
                <div class="col-lg-6 col-md-12 mb-5">
                    <img src="img/b2.jpg " alt="" class="card-img mb-3"/><br>
                    <button class="btn btn-light">Travel</button>
                    <button class="btn btn-light">Life Style</button>
                    <h5>Portable latest Fashion for young women</h5>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                        sed do eiusmod tempor incididunt ut labore et dolore.</p>
                    <p>31st January, 2018</p>
                </div>
            </div>
        </div>
    </div>
   </div>
</template>
<script>   
  export default {
    data(){
      return {
        
      }
    }
  }
</script>
<style>
header{
    width: 100%;
    height: 759px;
    display:block;
    position: absolute;
    top: 0px;
}
nav{
    width: 100%;
    background-color:#150301 ;
    opacity: 0.9;
}
@media screen and (max-width: 961px){
    .hid{
        display: none;
    }
}
#nav1 ul li a i{
    width: 0;
    height: 0;
    border: 3px solid transparent;
    border-top: 3px solid #dddddd;
    position: relative;
    top: 0.8rem;
}
.font-1{
    font-size: 0.8rem;
    color:#C98E61 ;
}
#main{
    width: 100%;
    height: auto;
    /* background-image: url("../img/menu-bg.jpg"); */
}
.shadow{
    box-shadow: 0 4px 20px 2px #bbbbbb;
}
.money{
    float: right;
    margin-right: 1rem;
    color: #B68834;
}
#article-2{
    background-color: #B68834;
    margin-top: 100px;
}
.p-font{
    font-size:4rem;
}
@media screen and (max-width: 991px) and (min-width: 576px){
    footer img{
        width: 1700px;
        height: 700px;
    }
}
@media screen and (max-width: 767px){
    footer img{
        width:3400px;
        height: 1000px;
    }
}

</style>